<template>
	<div class="ivu-box">
		<Breadcrumb>
			<BreadcrumbItem>机器组管理</BreadcrumbItem>
			<BreadcrumbItem>机器组列表</BreadcrumbItem>
		</Breadcrumb>

		<Form ref="formInline" :model="request" inline >

			<FormItem>
				<Input type="text" v-model="request.username" @click="search" clearable placeholder="请输入机器组" />
			</FormItem>
			<FormItem>
				<Button type="primary"  style="margin-right: 10px">搜索</Button>
			</FormItem>
		</Form>

		<div class="form_box">
			<Table :columns="columns1" :data="tableData" @on-selection-change="selectChange">
				<template slot-scope="{ row }" slot="status" >
					
						<Tag color="success" type="border" v-if="row.status == 1">启用</Tag>
						<Tag color="error" type="border" v-if="row.status == 2">禁用</Tag>
					
				</template>
				
			
				<template slot-scope="{ row }" slot="operator">
					<div v-for="(item,index) in row.operator">{{item.username}}</div>
				</template>
				
				<template slot-scope="{ row }" slot="device_name">
					<div v-for="(item,index) in row.device_name">{{item.name}}</div>
				</template>
			
				<template slot-scope="{ row }" slot="option">
					<Button type="primary" size="small" v-if="type!=3" style="margin-right: 5px" @click="edit(row)">编辑</Button>
				</template>
				
			</Table>
		</div>
		
		

		<div style="display: flex;justify-content: center;margin-top: 24px;">
			<Page :total="page.count" :page-size="20" :page-size-opts="[20,30,40,50,100]" show-elevator show-sizer
				show-total @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange" />
		</div>




		<Modal v-model="modal1" :title="form.id ? '编辑机器组' : '添加机器组'" :loading="modalLoading" :mask-closable="false"
			@on-ok="confirm" @on-cancel="cancel">
			
			<Form :model="form" :label-width="110">
				
				<FormItem label="机器组">
					<Input v-model="form.name" placeholder="请输入机器组"></Input>
				</FormItem>
				
				<FormItem label="操作员">
					<CheckboxGroup v-model="form.operator_id">
						<Checkbox :label="item.id" v-for="(item,index) in operatorList" :key="index">{{item.username}}</Checkbox>
					</CheckboxGroup>
				</FormItem>
				
				
				<FormItem label="已分配机器" >
					<div class="maxH72">
						<CheckboxGroup v-model="form.device_id"  v-if="allocated.length>0">
							<Checkbox  :label="item.id" v-for="(item,index) in allocated" :key="index">{{item.name}}</Checkbox>
						</CheckboxGroup>
					</div>
				</FormItem>
				
				<FormItem label="未分配机器" >
					<div class="maxH72">
						<CheckboxGroup v-model="form.device_id"  v-if="undistributed.length>0">
							<Checkbox :label="item.id" v-for="(item,index) in undistributed" :key="index">{{item.name}}</Checkbox>
						</CheckboxGroup>
					</div>
				</FormItem>
				
				
			</Form>
		</Modal>

	

	</div>
</template>

<script>
	export default {
		data() {
			return {
				width: this.$store.state.width,
				height: this.$store.state.height,
				showDel: false, //批量删除
				type:1,//1admin 2manager 3operator
				loading: false,
				request: {
					username: '',
					phone: '',
					status: '',
					real_name: '',
					p: 1
				},
			
				columns1: [
					{
						title: "机器组",
						key: "name",
						minWidth: 150,
						align: "center"
					},
	
					{
						title: "操作员",
						slot: "operator",
						minWidth: 150,
						align: "center"
					},
					{
						title: "机器",
						slot: "device_name",
						minWidth: 150,
						align: "center"
					},
					
					{
						title: "状态",
						slot: "status",
						minWidth: 150,
						align: "center"
					},
					{
						title: "创建时间",
						key: "create_time",
						minWidth: 150,
						align: "center"
					},

					{
						title: "操作",
						minWidth: 150,
						slot: "option",
						align: "center",
						fixed: 'right',
					}
				],
				tableData: [],
				page: {},
				modalLoading: true,
				modal1: false,
				form: {
					id:null,
					name:'',
					operator_id:[],
					device_id:[],
				},
				user: {
					uid: '',
					role_id: ''
				},
				data1: [],
				selectID: [],
				content: '权限1;权限2;权限3;权限4;权限5;权限6;权限7;权限8',
				
				operatorList:[],
				
				allocated :[],
				undistributed:[] ,
				allocatedAll:[], //已分配机器默认效果
			};
		},
		mounted() {
			
			console.log(this.$route.query)
			
			if(this.$route.query.name){
				this.request.username = this.$route.query.name
			}
			if(this.$route.query.type){
				this.type = this.$route.query.type
			}
			
			
			this.lists();
			this.getOperator()
		},
		methods: {
			alldel() {
				//批量删除
				this.$Modal.confirm({
					title: "确定要删除这些机器组？",
					onOk: () => {
						// this.$Message.success("删除成功");
						this.$Message.success('批量删除id:' + JSON.stringify(this.selectID));
					},
					onCancel: () => {}
				});


			},
			selectChange(selection) {
				console.log('选项发生改变', selection)
				this.selectID = [];
				selection.forEach(item => {
					this.selectID.push(item.id)
				})

				if (this.selectID.length > 0) {
					this.showDel = true
				} else {
					this.showDel = false
				}

				console.log(this.selectID)


			},

	
		
			search() {
				this.request.page = 1;
				this.lists();
			},
			handleSizeChange(val) {
				this.request.page= 1;
				this.request.pagerows = val;
				this.lists();
			},
			handleCurrentChange(val) {
				this.request.page= val;
				this.lists();
			},
			lists() {
				this.loading = true;
				this.axios.post("manager/manageDeviceGroup",this.request).then(res => {
					if (res.code == 1) {
						this.loading = false;
						this.tableData = res.data.list;
						this.page.count = res.data.count; // 总条数
						this.page.curPage = res.data.curPage; // 当前页
						this.page.countPage = res.data.countPage; // 总页数
					}
				});
			},
			getOperator(){ //获取所有操作员
				this.axios.post("manager/operatorList",{limit:1000}).then(res => {
					if (res.code == 1) {
						this.operatorList = res.data.list
					}
				});
			},
			
			getAllDev(id){ //已分配机器 未分配机器
				// ,{manager_id:id}
				
				this.axios.post("device/getAllDev").then(res => {
					if (res.code == 1) {
						this.allocated = res.data.allocated;
						this.undistributed= res.data.undistributed;
					}
				});
			},
			
			
			edit(row) {
				this.form.id = row.id;
				this.form.name = row.name;
				this.form.operator_id = [];
				this.form.device_id = [];
				var operator_id = row.operator;
				var device_id = row.device_name;
				for(var i = 0,len=operator_id.length;i<len;i++){
					this.form.operator_id.push(operator_id[i].operator_id)
				}
				for(var i = 0,len=device_id.length;i<len;i++){
					this.form.device_id.push(device_id[i].device_id)
				}
				console.log(this.form);
				
				
				this.getAllDev()
				
				this.modal1 = true;
			},
			confirm() {
				
				var form =this.form;
				if(form.device_id.length == 0){
					form.device_id = ['0']
				}
				
				
				this.axios.post("manager/manageDeviceGroupEdit",this.form).then(res => {
					if (res.code == 1) {
						this.modal1 = false;
						this.$Message.success("保存成功！");
						this.lists();
						this.cancel();
					}
				});
				
				
			},
			cancel() {
				this.form = {
					id:null,
					name:'',
					operator_id:[],
					device_id:[],
				};
				this.allocated = [];
				this.undistributed= [];
			}
		}
	};
</script>

<style scoped>
	.spec_item {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.spec_item .input {
		width: 200px;
	}

	.spec_item button {
		margin-left: 10px;
	}

</style>
